<style lang="less" scoped>

  section{
    height: 100%;
    padding:0 1.5rem;
    font-size:.8rem;
    &>ul{
      height: 100%;
    }
  }

  .input-common{
    padding:.2rem;
    border-radius:.2rem;
    border:1px solid #c5bfbf;
    height:1rem;
    align-self:center;
  }

  .dflex{
    display:flex;
  }

  .dn{
    display:none;
  }

  .pr{
    position:relative;
  }

  #project-name{
    width:83%;
    .input-common;
  }

  #path-name{
    width:78%;
    padding:.2rem;
    border-top-left-radius:.2em;
    border-bottom-left-radius:.2em;
    border:1px solid #c5bfbf;
    height:1rem;
    align-self:center;
    border-right-width: 0;
  }

  .group-one{
    height:10%;
    .dflex;
    .project-name{
      width:5rem;
      align-self: center;
    }
  }

  .group-two{
    height:10%;
    .dflex;
    .path-name{
      width:5rem;
      align-self: center;
    }
    button{
      height:1.5rem;
      width:5%;
      align-self: center;
      border: 0;
      background-color: #409cf9;
      color: #fff;
      height: 1.6rem;
      border-top-right-radius:.2em;
      border-bottom-right-radius:.2em;
    }
  }

  .group-three{
    .dflex;
    height:10%;
    p{
      flex-grow:1;
      align-self: center;
    }
  }

  .group-four{
    .dflex;
    height:60%;
  }

  .group-five{
    .dflex;
    height:10%;
    button{
      align-self: center;
    }
    .cancle{
      margin-left: 2rem;
    }
  }

  .pageset{
    background-color:white;
    width:60%;
    margin-right:1rem;
    overflow:hidden;
    border-radius: .2rem;
   
    .tree-list{
      overflow:auto;
      height:92%;
    }
    .add-parent{
      height:8%;
      text-align: center;
      background-color:gray;
      position: absolute;
      bottom: 0;
      left:0;
      right:0;
    }
  }

  .layoutset{
    flex-grow:1
  }

  #addParent{
    border-bottom-left-radius: .2rem;
    border-bottom-right-radius: .2rem;
    background-color: #f6f6f6;
    border:1px solid #e5e5e5;
    border-width: 1px 0;
  }

  .inner{
     width:200px;
            height:70px;
            margin: auto;  
            position: absolute;  
            top: 0; left: 0; bottom: 0; right: 0; 
            background-color: white;
            overflow: hidden;
      div{
        margin: 9px 0;
        input{
           border-radius: .2rem;
        border: 1px solid #c5bfbf;
        }
      }
  }

</style>
<template>

<section>
  
  <ul>
    <li  class="group-one">
      <label for="project-name" class="project-name">项目名</label>
      <input type="text" placeholder="项目名" id="project-name"/>
    </li>
    <li class="group-two">
      <!--需要electron配合-->
      <label for="path-name" class="path-name">项目路径</label>
      <input type="text" placeholder="项目路径" id="path-name"/>
      <input type="file" id="file-select" class="dn" @change="fileChange"/>
      <button @click="openFile">V</button>
    </li>
    <li class="group-three">
      <p>页面设置</p>
      <p>布局设置</p>
    </li>
    <li class="group-four">
      <div class="pageset pr">
        <div class="tree-list">
          <v-list :pageSet="guide.pageSet"></v-list>
        </div>
        <div class="add-parent" id="addParent">
          <button @click="showShade">添加父节点</button>
        </div>
      </div>
      <div class="layoutset">
        <v-layout></v-layout>
      </div>
    </li>
    <!--与主进程通信-->
    <li class="group-five">
      <button @click="sure">确定</button>
      <button @click="cancle" class="cancle">取消</button>
    </li>
  </ul>
  <!--弹框-->
  <v-shade v-if="guide.isShowShade">
    <div class="inner">
      <div>
         <input type="text" id="node"/>
      </div>
      <button @click="addNode">确定</button>
      <button @click="cancelNode">取消</button>
    </div>
  </v-shade>
</section>
  
</template>

<script>

import vLayout from './Layout'
import vList from './List'
import vShade from './Shade'

import { mapState } from 'vuex'

export default {
  name: 'guide',
  computed: mapState([
    'guide'
  ]),
  components: {
    vLayout,
    vList,
    vShade
  },
  methods: {
    openFile(){
      document.getElementById('file-select').click();
    },
    fileChange(e){
      var filepath = e.target.value;
      document.getElementById('path-name').value = filepath;
    },
    showShade(){
      this.$store.dispatch('showShade',{
        state:true,
        class:"parent"
      });
    },
    // 父节点 + 子节点
    addNode(){
      if(!document.getElementById("node").value) return;
      
      var classOpr = this.$store.state.guide.class;
      if(classOpr === 'parent'){
        this.$store.dispatch('addParent',{
          nodeValue:document.getElementById("node").value
        });
        this.$store.dispatch('showShade',{
          state:false,
          class:"parent"
        });
      }else{
        this.$store.dispatch('addChild',{
          nodeValue:document.getElementById("node").value
        });
        this.$store.dispatch('showShade',{
          state:false,
          class:"child"
        });
      }
      
    },
    cancelNode(){
      document.getElementById("node").value = '';
      this.$store.dispatch('showShade',{
        state:false
      });
    },
    sure(){
      //需要先进行验证
      //拼接输出数据
      var Obj={},layOutId;
      document.getElementsByName("layout").forEach(function(ele,index){
        if(ele.checked){
          layOutId = ele.value;
        }
      })
      Obj.path =  document.getElementById('project-name').value;
      Obj.layOutId =  layOutId;
      Obj.from = 'create';
      Obj.pageSettings = this.$store.state.guide.pageSet;
      console.log(Obj)
    },
    cancle(){
      this.$router.back({name: '／'});
    }
  }
}

// const ipc = require('electron').ipcRenderer

// const selectDirBtn = document.getElementById('select-directory')

// selectDirBtn.addEventListener('click', function (event) {
//   ipc.send('open-file-dialog')
// })

// ipc.on('selected-directory', function (event, path) {
//   document.getElementById('selected-file').innerHTML = `You selected: ${path}`
// })
// Main Process

// const ipc = require('electron').ipcMain
// const dialog = require('electron').dialog

// ipc.on('open-file-dialog', function (event) {
//   dialog.showOpenDialog({
//     properties: ['openFile', 'openDirectory']
//   }, function (files) {
//     if (files) event.sender.send('selected-directory', files)
//   })
// })
</script>

